<style scoped>
.split {
    height: calc(100vh - 140px);
    background: #ffffff;
    border: 1px solid #dcdee2;
}

.split-pane {
    padding: 10px;
}

/deep/.ivu-table-header thead tr th {
    background: #2db7f5 !important;
    font-size: 15px;
    color: #211f1f;
}

/deep/.ivu-table-fixed-header thead tr th {
    background: #2db7f5 !important;
    font-size: 15px;
    color: #211f1f;
}
</style>
<template>
    <div class="split">
        <div class="split-pane">
            <Card style="margin-bottom: 10px">
                <Form inline class="form-search">
                    <FormItem>
                        <Input v-model="keyword" placeholder="名称" style="width: 200px" />
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="
                            page = 1;
                        SearchProduct();
                        " icon="md-search">查询</Button>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="AddData" icon="md-add">新增</Button>
                    </FormItem>
                </Form>
            </Card>
            <Table ref="table" style="margin-bottom: 10px" border :loading="loadingTable" :columns="tableTitle" :data="tableData" :height="tableHeight"></Table>
            <Page :total="total" :current="page" :page-size="size" :page-size-opts="[10, 50, 100]" @on-change="(s) => {
                page = s; SearchProduct();
            }" @on-page-size-change="(p) => { size = p; page = 1; SearchProduct(); }" show-total show-sizer />
            <Modal :width="800" v-model="modalData" :title="tempData.Id > 0 ? '修改药品信息' : '新增药品信息'" :mask-closable="false" draggable sticky>
                <Form ref="formValidate" :model="tempData" :label-width="90" :rules="ruleValidate">
                    <!-- <FormItem label="药品类别" prop="TypeId">
                            <treeselect v-model="tempData.TypeId" :searchable="false" placeholder="" :clearable="false"
                                :options="selectTreeData" />
                    </FormItem>-->
                    <Row>
                        <Col span="12">
                            <FormItem label="药品名称" prop="Name">
                                <Input v-model="tempData.Name" />
                            </FormItem>
                        </Col>
                        <!-- <Col span="12">
                            <FormItem label="药品编码" prop="Code">
                                <Input v-model="tempData.Code" />
                            </FormItem>
                        </Col>-->
                        <!-- <Col span="12">
                            <FormItem label="采购价" prop="InPrice">
                                <Input type="number" v-model="tempData.InPrice" />
                            </FormItem>
                        </Col>-->
                        <Col span="12">
                            <FormItem label="单价" prop="Price">
                                <Input type="number" v-model="tempData.Price" />
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="药品单位" prop="Unit">
                                <AutoComplete v-model="tempData.Unit" :data="unitList" placeholder style="width: 200px"></AutoComplete>
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="生产厂家">
                                <Input type="text" v-model="tempData.Manufacturer" />
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="药品规格" prop="Specification">
                                <Input type="text" v-model="tempData.Specification" />
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="药品剂型" prop="Formulations">
                                <Input type="text" v-model="tempData.Formulations" />
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="批号" prop="GuoyaoZhunzi">
                                <Input type="text" v-model="tempData.GuoyaoZhunzi" />
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="生产日期" prop="ManufacturingDate">
                                <DatePicker type="date" :options="options2" placeholder="请选择生产日期" v-model="tempData.ManufacturingDate" style="width: 200px"></DatePicker>
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="有效期至" prop="ExpirationDate">
                                <DatePicker type="date" :options="options1" placeholder="请选择有效期至" v-model="tempData.ExpirationDate" style="width: 200px"></DatePicker>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
                <div slot="footer">
                    <Button type="text" @click="modalData = false">取消</Button>
                    <Button type="primary" :loading="loading" @click="SaveData">确定</Button>
                </div>
            </Modal>
        </div>
    </div>
</template>

<script>
import {
    SearchProduct,
    GetTreeProductType,
    DeleteProduct,
    SaveProduct,
    SearchUnit,
} from "@/api/product";
// import the component
import Treeselect from "@riophae/vue-treeselect";
// import the styles
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { InitProductTypeTree } from "@/libs/tools";
export default {
    name: "product",
    components: {
        Treeselect,
    },
    data() {
        return {
            split1: 0,
            total: 0,
            page: 1,
            size: 10,
            tableHeight: 450,
            keyword: "",
            typeid: 0,
            ruleValidate: {
                Name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
                Unit: [{ required: true, message: "计量单位为空", trigger: "blur" }],
                Specification: [
                    { required: true, message: "规格不能为空", trigger: "blur" },
                ],
                // Manufacturer: [
                //     { required: true, message: "生产厂家不能为空", trigger: "blur" },
                // ],
                Formulations: [
                    { required: true, message: "剂型不能为空", trigger: "blur" },
                ],
                ManufacturingDate: [
                    { pattern: /.+/, required: true, message: "生产日期不能为空", trigger: "blur" },
                ],
                ExpirationDate: [
                    { pattern: /.+/, required: true, message: "有效期至不能不为空", trigger: "blur" },
                ],
            },
            loading: false,
            loadingTable: false,
            modalData: false,
            tempData: {},
            typeList: [],
            treeData: [],
            selectTreeData: [],
            tableTitle: [
                {
                    type: "index",
                    title: "序号",
                    align: "center",
                    width: 60,
                    indexMethod: (params) => {
                        return params._index + (this.page - 1) * this.size + 1;
                    }
                },
                {
                    title: "操作",
                    align: "center",
                    resizable: true,
                    width: 150,
                    render: (h, params) => {
                        return h("div", [
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "primary",
                                        size: "small",
                                    },
                                    style: {
                                        marginRight: "5px",
                                    },
                                    on: {
                                        click: () => {
                                            this.tempData = params.row;
                                            this.modalData = true;
                                        },
                                    },
                                },
                                "修改"
                            ),
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "error",
                                        size: "small",
                                    },
                                    style: {
                                        marginRight: "5px",
                                    },
                                    on: {
                                        click: () => {
                                            this.DeleteProduct(params.row.Id);
                                        },
                                    },
                                },
                                "删除"
                            ),
                        ]);
                    },
                },
                // {
                //     key: "TypeName",
                //     title: "分类",
                //     width: 100,
                //     resizable: true,
                //     align: "center",
                // },
                // {
                //     key: "Code",
                //     title: "编码",
                //     minWidth: 80,
                //     resizable: true,
                //     align: "center",
                // },
                {
                    key: "Name",
                    title: "名称",
                    Width: 150,
                    resizable: true,
                    align: "left",
                },
                {
                    key: "Specification",
                    title: "规格",
                    resizable: true,
                    align: "left",
                },
                {
                    key: "Unit",
                    title: "单位",
                    Width: 80,
                    resizable: true,
                    align: "center",
                },
                {
                    key: "Manufacturer",
                    title: "生产厂家",
                    resizable: true,
                    align: "left",
                },
                {
                    key: "Formulations",
                    title: "剂型",
                    resizable: true,
                    align: "center",
                },
                {
                    key: "Price",
                    title: "价格",
                    width: 100,
                    resizable: true,
                    align: "center",
                },
                {
                    key: "ExpirationDate",
                    title: "有效期至",
                    width: 120,
                    align: "center",
                    render: (h, params) => {
                        return h('span', {}, this.dayjs(params.row.ExpirationDate).format('YYYY-MM-DD'))
                    }
                },
            ],
            tableData: [],
            unitList: [],
            options1: {
                disabledDate(date) {
                    return date && date.valueOf() < Date.now() - 86400000;
                }
            },
            options2: {
                disabledDate(date) {
                    return date && date.valueOf() >= Date.now() - 86400000;
                }
            }
        };
    },
    computed: {},
    methods: {
        changeTree(a, b) {
            this.typeid = b.id;
            this.SearchProduct();
        },
        SaveData() {
            let vm = this;
            vm.$refs["formValidate"].validate((valid) => {
                if (valid) {
                    vm.loading = true;
                    SaveProduct(vm.tempData).then((res) => {
                        vm.loading = false;
                        const data = res.data;
                        if (data.StatusCode == 200) {
                            vm.modalData = false;
                            vm.$Message.success({ title: "提示", content: "保存成功" });
                            vm.SearchProduct();
                            vm.SearchUnit();
                        } else {
                            vm.$Message.error({ title: "提示", content: data.Errors });
                        }
                    });
                }
            });
        },
        SearchProduct() {
            let vm = this;
            vm.loadingTable = true;
            var reqData = {
                keyword: vm.keyword,
                typeid: vm.typeid,
                page: vm.page,
                size: vm.size,
            };
            SearchProduct(reqData).then((res) => {
                vm.loadingTable = false;
                var data = res.data;
                if (data.StatusCode == 200) {
                    vm.tableData = data.Data.Items;
                    vm.total = data.Data.TotalCount;
                } else {
                    vm.$Notice.error({
                        title: data.Errors,
                    });
                }
            });
        },
        GetTreeProductType() {
            let vm = this;
            GetTreeProductType(0).then((res) => {
                const data = res.data;
                if (data.StatusCode == 200) {
                    this.selectTreeData = InitProductTypeTree(data.Data);
                    this.treeData = [
                        {
                            id: 0,
                            label: "全部",
                            title: "全部",
                            value: 0,
                            expand: true,
                            children: this.selectTreeData,
                        },
                    ];
                } else {
                    vm.$Message.error({ title: "提示", content: data.Errors });
                }
            });
        },
        DeleteProduct(id) {
            this.$Modal.confirm({
                title: "提示",
                content: "确定要删除吗？",
                onOk: () => {
                    DeleteProduct(id).then((res) => {
                        const data = res.data;
                        if (data.StatusCode == 200) {
                            this.SearchProduct();
                            this.$Message.success({ title: "提示", content: "删除成功" });
                        } else {
                            this.$Message.error({ title: "提示", content: data.Errors });
                        }
                    });
                },
                onCancel: () => { },
            });
        },
        SearchUnit() {
            let vm = this;
            var reqData = {};
            SearchUnit(reqData).then((res) => {
                vm.loadingTable = false;
                var data = res.data;
                if (data.StatusCode == 200) {
                    vm.unitList = data.Data.map((m) => {
                        return m.Name;
                    });
                } else {
                    vm.$Notice.error({
                        title: data.Errors,
                    });
                }
            });
        },

        AddData() {
            this.tempData = {};
            this.modalData = true;
        },
    },

    mounted() {
        this.tableHeight = window.innerHeight - 300;
        //this.GetTreeProductType();
        this.SearchProduct();
        this.SearchUnit();
    },
};
</script>
